<template>
  <div id="box" class="w-fill h-fill bg-[#1a2c38] min-375 text-white">
    <div
      class="w-full max-w-[1200px] m-auto p-4 items-center min-h-[500px] myBet_boxs"
    >
      <div class="flex items-center mb-4">
        <i class="fas fa-clipboard-list text-xl mr-2"></i>
        <h1 class="text-xl">{{ $t("page.navbar.mybet") }}</h1>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full text-left" style="table-layout: fixed">
          <thead class="table-header text-[#90bacc]">
            <tr>
              <th class="p-4 text-left">{{ $t("page.table.game") }}</th>
              <th class="p-4 text-center hidden lg:table-cell">
                <div>{{ $t("page.table.Time") }}</div>
                <div>{{ $t("page.table.settlementTime") }}</div>
              </th>
              <th class="p-4 text-right">{{ $t("page.table.betamount") }}</th>
              <th class="p-4 text-right hidden lg:table-cell">
                {{ $t("page.table.prize") }}
              </th>
              <th class="p-4 text-right hidden lg:table-cell">
                {{ $t("page.table.earnings") }}
              </th>
            </tr>
          </thead>
          <tbody v-if="tableData.length">
            <tr
              class="table-row bg-[#213743]"
              v-for="(item, i) in tableData"
              :key="i"
            >
              <td class="p-4 text-left truncate">{{ item.game_name }}</td>
              <td class="p-4 text-center truncate hidden lg:table-cell">
                <div>{{ item.bet_at }}</div>
                <div>{{ item.reckon_at }}</div>
              </td>
              <td class="p-4 text-right truncate">{{ item.bet_amount }}</td>
              <td class="p-4 text-right truncate hidden lg:table-cell">
                {{ item.prize }}
              </td>
              <td class="p-4 text-right truncate hidden lg:table-cell">
                {{ item.profit }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="max-w-[200px] w-full m-auto mt-2">
        <van-pagination
          :prev-text="$t('page.table.prev')"
          :next-text="$t('page.table.next')"
          v-model="currentPage"
          :page-count="totalList"
          mode="simple"
          @change="goPage"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { betList } from "../../api/casion";
import { dateTimeZone } from "../../utils/date";
import { data } from "autoprefixer";
import { mainAct } from "@/store/activeda";

const main = mainAct();
const currentPage = ref(1);
const totalList = ref(0);
const tableData = ref([]);
const getList = async () => {
  tableData.value = [];
  let data = {
    page: currentPage.value,
    page_size: 10
  };
  let res = await betList(data);
  console.log("⬇⬇   ---> 注单列表 <---   ⬇⬇");
  console.log(res);
  if (res.errno == 0) {
    res.data.list.forEach(item => {
      item.reckon_at = dateTimeZone(
        item.reckon_at,
        "{y}-{m}-{d} {h}:{i}:{s}",
        main.timeZone
      );
      item.bet_at = dateTimeZone(
        item.bet_at,
        "{y}-{m}-{d} {h}:{i}:{s}",
        main.timeZone
      );
      item.game_name = item.game_name.replace(/(\d+%)/, "");
    });
    tableData.value = res.data.list;
    totalList.value = Math.ceil(res.data.total / 10);
    console.log(totalList.value);
  }
};
const goPage = () => {
  console.log(currentPage.value);
  getList();
};
onMounted(() => {
  scrollListener();
  if (!main.isLogin) return;
  getList();
});
let scrollListener = () => {
  window.scrollTo(0, 0);
};
watch(
  () => main.isLogin,
  () => {
    if (main.isLogin) {
      //执行onmounted请求
      getList();
    }
  }
);
</script>
<style scoped lang="less">
.btn {
  background-color: #1c2b3a;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
}
.btn:hover {
  background-color: #22303f;
}
.dropdown {
  background-color: #1c2b3a;
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 0.25rem;
}
:deep(.van-pagination__item) {
  border-radius: 5px;
  background-color: #1a2c38;
  padding: 0;
  .btn {
    border: unset;
    outline: unset;
  }
}
:deep(.van-hairline--surround:after) {
  border: unset;
  outline: unset;
}
.table-row:nth-child(even) {
  background-color: #1a2c38 !important;
}
.myBet_boxs {
  margin-bottom: 70px;
}
</style>
